<template>
  <div class="container">
    <swiper indicator-dots indicator-active-color="#fff" circular>
            <swiper-item>
                <image  src="http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image  src="http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image  src="http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image  src="http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg"></image>
            </swiper-item>
    </swiper>
    <Listcom v-for="(item,index) in ListTemp" :key="index" :item='item' :index="index"></Listcom>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import Listcom from '../components/list_template.vue';
export default {
  data(){
    return {}
  },
  
  components:{
    Listcom
  },
  beforeMount() {
    // 分发action修改状态
    console.log(this.$store)
    this.$store.dispatch('getList')
  },
  computed:{
    // 映射状态到本组件
    ...mapState(['ListTemp'])
  }
}
</script>

<style>
.container swiper{
  height:480rpx;
}
.container swiper-item {
  width:100%;
  height: 100%;
}
.container swiper-item image {
  width:100%;
  height: 100%;
}
</style>
